<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>不想起名|写文章</title>
    <%String context = request.getContextPath();%>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="shortcut icon" href="../img/favicon.ico"/>
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/editormd.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <script src="../js/blog.js"></script>
    <script src="../js/editormd.min.js"></script>
    <script type="text/javascript">
        $(function () {
            let main_id = $("#main_id");
            $.ajax({
                dataType: "json",    //数据类型为json格式
                type: "GET",
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                url: "<%=context %>/servlet/CategoryServlet?action=ajaxmain",
                success: function (data) {
                    main_id.empty();
                    $.each(data, function (key, val) {
                        main_id.append('<option value="' + key + '">' + val + '</option>');
                    })
                    window.getSubCatagory();
                },
                error: function () {
                    alert("获取1级分类失败");
                }
            });
            //日期选择器
            $("#datepicker").datepicker({
                /*changeMonth: true, //显示月份下拉框
                changeYear: true, //显示年份下拉框*/
                dateFormat: 'yy-mm-dd', //设置日期显示格式
                minDate: -0,//起始日期的范围
                maxDate: +0
            });
        });

        function getSubCatagory() {
            let main_id = $("#main_id").val();
            $.ajax({
                dataType: "json",    //数据类型为json格式
                type: "GET",
                url: "<%=context %>/servlet/CategoryServlet?action=ajaxsub",
                data: {"main_id": main_id},
                success: function (data) {
                    let sub_id = $("#sub_id");
                    sub_id.empty();
                    sub_id.append('<option value="0">————</option>');
                    $.each(data, function (key, val) {
                        sub_id.append('<option value="' + key + '">' + val + '</option>');
                    })
                },
                error: function () {
                    alert("获取2级分类失败");
                }
            })
        }
    </script>
</head>
<body>
<%--获取session，若是没有登录则跳转到登录界面--%>
<%
    if (session.getAttribute("username") == null) {
%>
<%--调用下面的模态框提示登录--%>
<script>
    $(function () {
        $('#staticBackdrop').modal('show')
    });
</script>
<%
    }
%>
<!-- 模态框 -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">未登录！</h5>
            </div>
            <div class="modal-body">
                管理员登录之后方可管理界面
            </div>
            <div class="modal-footer">
                <a href="../login.html" type="button" class="btn btn-outline-primary">登录</a>
            </div>
        </div>
    </div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <a class="navbar-brand" href="">
        <img class="rounded img-fluid" src="../img/avatar.jpg" width="48" height="48" alt="个人头像">
    </a>
    <!-- Links -->
    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="<%=context %>/servlet/PostlistServlet?role=1"
               class="nav-link">查看文章</a>
        </li>
        <li class="nav-item">
            <a href="<%=context %>/admin/addpost.jsp" class="nav-link">写文章</a>
        </li>
        <li class="nav-item">
            <a href="<%=context %>/servlet/CategoryServlet?action=getall"
               class="nav-link">文章分类</a>
        </li>
        <li class="nav-item">
            <a href="<%=context %>/index.html" class="nav-link">返回首页</a>
        </li>
        <li>
            <a href="javascript:scroll(0,0)" class="nav-link">回到顶部</a>
        </li>
    </ul>
</nav>
<div class="container-fluid">
    <form class="form-group" action="<%=context %>/servlet/PosteditServlet?action=add" method="post">
        <div class="card bg-light text-dark" style="margin: 2%">
            <div class="card-header"><h4>撰写新文章</h4></div>
            <div class="card-body row">
                <div id="edit" class="col-9">
                    <label for="article-title">标题</label>
                    <input type="text" id="article-title" name="title" class="form-control" placeholder="在此处输入标题"
                           required autofocus>
                    <label for="test-editormd">MarkDown编辑器</label>
                    <div id="test-editormd">
                        <textarea class="form-control" name="test-editormd-markdown-doc" required></textarea>
                    </div>
                    <%--Markdown编辑器--%>
                    <script type="text/javascript">
                        $(function () {
                            editormd("test-editormd", {
                                mode: "markdown",
                                width: "100%",
                                height: 600,
                                autoFocus: false,
                                //你的lib目录的路径，我这边用JSP做测试的
                                path: "lib/",
                                emoji: true,
                                placeholder: "在这里愉快的进行MarkDown编辑！",
                                //若设为true，则Editor会自动创建一个<textarea name="{editor-id}-html-code">来保存HTML形式并提交到表单中
                                saveHTMLToTextarea: true
                            });
                        });
                    </script>
                </div>
                <div id="operate" class="col-3">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="将该文章置顶" disabled>
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <input type="checkbox" name="top" value="1">
                            </div>
                        </div>
                    </div>
                    <label for="datepicker">发布时间</label>
                    <input type="text" class="form-control" id="datepicker" name="createdate" required>
                    <label for="subtitle">摘要</label>
                    <textarea id="subtitle" name="subtitle" rows="5" class="form-control"></textarea>
                    <label for="main_id">一级分类</label>
                    <select class="form-control" id="main_id" name="main_id" onchange="getSubCatagory()" required>
                        <option value="0">————</option>
                    </select>
                    <label for="sub_id">二级分类</label>
                    <select class="form-control" id="sub_id" name="sub_id">
                        <option value="0">————</option>
                    </select>
                    <button type="submit" class="btn btn-outline-primary" style="float: right;margin:5px;">发布
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html> 
